<template>
  <el-form-item label="选项:" label-width="120px">
    <div class="options" v-for="(item, index) in options" :key="item.code">
      <el-radio :label="1" v-model="options[index].isRight" @click.native.prevent="checkedToggle(index)">{{ options[index].code }}</el-radio>
      <el-input v-model="options[index].title" style="width: 240px;"></el-input>
      <upload-image :url="item.img" @on-success="handleSuccess($event, index)" />
    </div>
    <el-button class="add" type="danger" :disabled="disabled" @click="addOption">+增加选项与答案</el-button>
  </el-form-item>
</template>

<script>
import uploadImage from '../components/UploadImage'
export default {
  name: 'options',
  data () {
    return {
    }
  },
  components: {
    uploadImage
  },
  props: {
    disabled: {
      type: Boolean,
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    questionsType: {
      type: String,
      required: true
    }
  },
  methods: {
    // 增加选项
    addOption () {
      // 获取选项的 ascii 值
      const ascii = this.options[this.options.length - 1].code.charCodeAt() + 1
      this.options.push({
        code: String.fromCharCode(ascii),
        title: '',
        img: '',
        isRight: 0
      })
    },
    // 单选按钮切换
    checkedToggle (index) {
      if (this.options[index].isRight === 1) {
        this.options[index].isRight = 0
      } else {
        this.options[index].isRight = 1
      }
      if (this.questionsType === '1') {
        this.options.forEach((item, i) => {
          if (i !== index) {
            item.isRight = 0
          }
        })
      }
    },
    // 处理上传腾讯云成功后的图片
    handleSuccess (arg, index) {
      this.options[index].img = arg[0].url
    },
    changeIsRight (value) {
      console.log(value)
    }
  }
}
</script>

<style scoped lang="less">
.options {
  display: flex;
  align-items: center;
  padding: 0 0 20px 0;
}
.add {
  background-color: #fab6b6;
  border: 0;
}
</style>
